<!DOCTYPE html>
<html>
<head>
    <title>maptalks.markercluster demo</title>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="../dist/maptalks.markercluster.js"></script>
    <script type="text/javascript" src="realworld.50000.1.js"></script>
    <script type="text/javascript" src="realworld.50000.2.js"></script>
    <style>
        html,body{
            margin:0px;
            height: 100%;
            width: 100%;
        }
        #map {
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" >
    //This demos is inspired by Leaflet.MarkerCluster
    //https://github.com/Leaflet/Leaflet.markercluster

    var map = new maptalks.Map("map",{
        center:   [175.27, -37.79],
        zoom   :  14,
        centerCross : true,
        baseLayer : new maptalks.TileLayer('tile',{
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
    });

    var markers = [];
    // data from realworld.50000.1.js
    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        markers.push(new maptalks.Marker([a[1], a[0]]).on('mousedown', onClick));
    }
    // data from realworld.50000.2.js
    for (var i = 0; i < addressPoints2.length; i++) {
        var a = addressPoints2[i];
        markers.push(new maptalks.Marker([a[1], a[0]]).on('mousedown', onClick));
    }

    var clusterLayer = new maptalks.ClusterLayer('cluster', markers, {
        'noClusterWithOneMarker' : false,
        'maxClusterZoom' : 18,
        //"count" is an internal variable: marker count in the cluster.
        'symbol': {
            'markerType' : 'ellipse',
            'markerFill' : { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [9, '#1bbc9b'], [99, 'rgb(216, 115, 149)']] },
            'markerFillOpacity' : 0.7,
            'markerLineOpacity' : 1,
            'markerLineWidth' : 3,
            'markerLineColor' : '#fff',
            'markerWidth' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },
            'markerHeight' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }
        },
        'drawClusterText': true,
        'geometryEvents' : true,
        'single': true
    });

    map.addLayer(clusterLayer);

    map.on('click', function (e) {
        console.log(clusterLayer.identify(e.coordinate));
    });

    function onClick(e) {
        console.log(e.target);
    }
</script>
</body>
</html>
